<template>
	<view class="router-view bcl-active">
		<!--  用户状态栏 -->
		<view class="user-login-state box box-column-center container bcl-white border border-bottom">
			<!-- 头像 用户名 -->
			<navigator url="/user/info/info" target="view" class="box-1 user-info-box">
				<view class="uni-avatar bcl-white circle border mr-10">
					<image :src="(userInfo && userInfo.avatar) || defaultImage" />
				</view>

				<view class="user-name box-1" v-if="!userInfo">
					<view class="cl-basic">您还未登录</view>
				</view>

				<view class="user-name box-1" v-else>
					<view class="hide-text-1 fz-16 bold">{{
            userInfo.account || "未认证"
          }}</view>
					<!-- <view
            class="user-vip-tag cl-warning mt-5 text-center inline-block fz-12"
            v-if="userInfo.vip_name"
            >{{ userInfo.vip_name }}</view
          > -->
					<view class="cl-main pt-10" style="display: inline-block;" @click.stop="toPage('/user/info/card')" v-if="userInfo.is_realname">已认证</view>
					<view class="cl-main pt-10" style="display: inline-block;" @click.stop="toPage('/user/setting/binding/name')"
					 v-else>申请认证</view>
				</view>
			</navigator>

			<!--  设置页面入口 -->
			<view class="setting-icon pt-10 pb-10 pl-20" style="padding-right: 0;">
				<navigator url="/user/setting/setting">
					<text class="icon icon-setting fz-24"></text>
				</navigator>
			</view>
		</view>

		<view class="container">
			<!-- VIP广告位 -->
			<!-- <view class="notice box box-column-center box-between container radius">
        <view>
          <view class="fz-24 bold cl-white letter-spacing">VIP特权</view>
          <view class="cl-white">签约热线：400-067-0660</view>
        </view>
        <navigator url="/user/member/member">
          <button class="uni-button uni-button-radius more-btn">
            更多了解
          </button>
        </navigator>
      </view> -->

			<!-- 个人功能 -->
			<!-- <view class="menu-list uni-grids bcl-white radius p-10 shadow mt-10">
        <view
          class="uni-grids-item pointer"
          v-for="(item, index) in personalMenu"
          :key="index"
        >
          <navigator :url="item.url">
            <image :src="`/static/images/my_menu_${index + 1}.png`" />
            <view>{{ item.name }}</view>
          </navigator>
        </view>
      </view> -->

			<!-- 菜单栏 -->
			<view class="menus-list container box box-warp bcl-white text-center">
				<view class="container" style="width: 50%;">
					<view class="bold">消息通知</view>
					<view>
						<switch :checked="menusData.isOpenMessage" color="#7ED321" style="transform:scale(0.7)" />
					</view>
				</view>
				<view class="container pointer" style="width: 50%;" @click="toPage('/user/wallet')">
					<view class="bold mb-10">钱包</view>
					<view class="cl-danger">￥{{ userInfo && userInfo.balance || 0 }}</view>
				</view>
				<view class="container pointer" style="width: 50%;" @click="
            toPage('/user/record/release?isEngineer=1&currentIndex=1')
          ">
					<view class="bold mb-10">进行中</view>
					<view>
						<text class="mr-5">{{ userInfo && userInfo.donging_count || 0 }}个</text>
						<text class="cl-danger">￥{{ userInfo && userInfo.donging_sum || 0 }}</text>
					</view>
				</view>
				<view class="container pointer" style="width: 50%;" @click="
            toPage('/user/record/release?isEngineer=1&currentIndex=2')
          ">
					<view class="bold mb-10">修改中</view>
					<view>
						<text class="mr-5">{{ userInfo && userInfo.edit_count || 0 }}个</text>
						<text class="cl-danger">￥{{ userInfo && userInfo.edit_sum || 0 }}</text>
					</view>
				</view>
			</view>

			<!-- 我是工程师 -->
			<view class="bcl-white radius shadow mt-10" style="position: relative" v-if="is_task === 2">
				<view @click="togcs(2)">
					<image src="/static/images/red.png" style="width: 75px; height: 75px;position: absolute;right:0px;"></image>
					<view style="position: absolute;right:2px;top:12px;
          font-size:12px;z-index: 9;color:#fff;transform:rotate(45deg);">客户</view>
				</view>
				<view class="border border-bottom p-15 box box-between" style="margin-right: 20px;">
					<span style="width: 3px;height: 40rpx;background: red;"></span>
					<view style="margin-left: -40rpx;">{{ !userInfo ? "我的服务" : "我是工程师" }}</view>
					<view class="box" v-if="userInfo">
						<view class="mr-15">
							<text class="cl-basic mr-5">中标/</text>{{ taskCount.done_bidding_count || 0 }}
						</view>
						<view class="mr-15">
							<text class="cl-basic mr-5">投标/</text>{{ taskCount.bidding_count || 0 }}
						</view>
						<view>
							<text class="cl-basic mr-5">好评率/</text>{{
                (taskCount.good_rate && toFixed(taskCount.good_rate,2)) || 0
              }}%
						</view>
					</view>
				</view>
				<view class="release-item p-10">
					<view v-if="taskCount.task && taskCount.task.id">
						<release-item :item="taskCount.task"></release-item>
						<navigator url="/user/record/release?isEngineer=1">
							<view class="text-center pt-10 cl-basic">查看全部</view>
						</navigator>
					</view>
					<view class="box box-between box-center container" v-else>
						<view class="no-task">
							<image mode="widthFix" src="/static/images/no_task.png" class="width height img" />
						</view>
						<view class="box-1 mr-10 ml-10">您还未参与任务任务，快去看看海量最新任务吧！</view>
						<navigator target="view" open-type="switchTab" url="/pages/index/index">
							<view class="uni-button uni-button-unfill uni-button-radius">立即前往
							</view>
						</navigator>
					</view>
				</view>
			</view>
			<!-- 我是客户 -->
			<view class="bcl-white radius shadow mt-10" style="position: relative" v-if="is_task === 1">
				<view @click="togcs(1)">
					<image src="/static/images/red.png" style="width: 75px; height: 75px;position: absolute;right:0px;"></image>
					<view style="position: absolute;right:-2px;top:15px;
          font-size:12px;z-index: 9;color:#fff;transform:rotate(50deg);">工程师</view>
				</view>
				<view class="border border-bottom p-15 box box-between" style="margin-right: 20px;">
					<span style="width: 3px;height: 40rpx;background: red;"></span>
					<view style="margin-left: -40rpx;">{{ !userInfo ? "我的服务" : "我是客户" }}</view>
					<view class="box" v-if="userInfo">
						<view class="mr-15">
							<text class="cl-basic mr-5">选标/</text>{{ taskCount.select_bidding_count || 0 }}
						</view>
						<view class="mr-15">
							<text class="cl-basic mr-5">验收/</text>{{ taskCount.deliver_bidding_count || 0 }}
						</view>
						<view>
							<text class="cl-basic mr-5">好评率/</text>{{
                (taskCount.good_rate && toFixed(taskCount.good_rate,2)) || 0
              }}%
						</view>
					</view>
				</view>
				<view class="release-item p-10">
					<view v-if="taskCount.new_task && taskCount.new_task.id">
						<release-item :item="taskCount.new_task"></release-item>
						<navigator url="/user/record/release">
							<view class="text-center pt-10 cl-basic">查看全部</view>
						</navigator>
					</view>
					<view class="box box-between box-center container" v-else>
						<view class="no-task">
							<image mode="widthFix" src="/static/images/no_task.png" class="width height img" />
						</view>
						<view class="box-1 mr-10 ml-10">您还未参与任务任务，快去看看海量最新任务吧！</view>
						<navigator target="view" open-type="switchTab" url="/task/task">
							<view class="uni-button uni-button-unfill uni-button-radius">立即前往</view>
						</navigator>
					</view>
				</view>
			</view>
			<!-- 更多功能 -->
			<!-- <view class="bcl-white radius shadow mt-10">
        <view class="border border-bottom p-15">更多功能</view>
        <view class="menu-list uni-grids p-10">
          <view
            class="uni-grids-item pointer relative"
            v-for="(item, index) in menuList"
            :key="index"
          >
            <button
              open-type="contact"
              hover-class="none"
              class="width height contact"
              v-if="index === 6"
            ></button>
            <navigator :url="item.url">
              <image :src="`/static/images/user_menu_${index + 1}.png`" />
              <view>{{ item.name }}</view>
            </navigator>
          </view>
        </view>
      </view> -->
		</view>

		<!-- 未登录遮罩 -->
		<navigator url="/user/login" target="view" class="not-Login-mask" v-if="!userInfo"></navigator>

		<!-- 发布按钮 -->
		<div class="send-btn pointer" :class="{ top: !userInfo }" @click="toSendPage">
			<image src="/static/images/release_1.png" style="width: 50px; height: 50px;"></image>
		</div>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex";
	import releaseItem from "../../components/releaseItem";
	import {
		acceptCount,
		userInfo
	} from "../../apis/user";

	export default {
		data() {
			return {
				is_task: 1, //1默认是工程师
				defaultImage: this.$config.default,
				personalMenu: [{
						name: "我的钱包",
						url: "/user/wallet",
					},
					{
						name: "我的收藏",
						url: "/user/browse?type=0",
					},
					{
						name: "我的关注",
						url: "/user/browse?type=1",
					},
					{
						name: "我的足迹",
						url: "/user/browse?type=2",
					},
				],
				menuList: [{
						name: "成为服务商",
						url: "/user/becomeServicer",
					},
					{
						name: "VIP特权",
						url: "/user/member/member",
					},
					{
						name: "技能标签",
						url: "/user/skill/skill",
					},
					{
						name: "我的发布",
						url: "/user/record/release",
					},
					{
						name: "空间规划",
						url: "/user/plan?type=4",
					},
					{
						name: "帮助中心",
						url: "/user/help",
					},
					{
						name: "客服中心",
						url: "",
					},
					{
						name: "我的消息",
						url: "/user/message/list?messageType=3",
					},
				],
				taskCount: {}, // 任务统计
				new_taskCount: {},

				// 菜单栏数据
				menusData: {
					isOpenMessage: true,
				},
			};
		},

		onShow() {
			uni.setStorageSync("lastPage", this.__route__ || this.route); // 记录最近一次访问的页面

			// uni.setTabBarItem({
			// 	index: 0,
			// 	text: '首页',
			// 	iconPath: 'static/icons/index.png',
			// 	selectedIconPath: 'static/icons/index_active.png',
			// 	pagePath: '/pages/index/index'
			// })
			
			if (this.userInfo) {
				this.getUserInfo();
				this.getTaskCount();
			}
		},

		methods: {
			toFixed(num,dot){
				let s = dot*2;
				let res = Math.floor(num * s) / s;
				return res;
			},
			async getTaskCount() {
				let {
					code,
					data,
					message
				} = await acceptCount();
				if (code === 200) {
					console.log(data);
					this.taskCount = data;
				}
			},

			async getUserInfo() {
				let {
					code,
					data
				} = await userInfo();

				if (code === 200) {
					let userInfo = { ...this.userInfo,
						...data
					};
					this.SET_USER_INFO(userInfo);
				}
			},

			toSendPage() {
				let url = this.userInfo ?
					"/pages/index/release/submit?type=1" :
					"/user/login";

				uni.navigateTo({
					url,
				});
			},

			toPage(url) {
				uni.navigateTo({
					url,
				});
			},
			togcs(type) {
				console.log(type);
				if (type == 1) {
					this.is_task = 2;
				} else if (type == 2) {
					this.is_task = 1;
				}
			},

			...mapActions(["SET_USER_INFO"]),
		},

		computed: {
			...mapState(["userInfo"]),
		},

		components: {
			releaseItem,
		},
	};
</script>

<style lang="scss" scoped>
	$yellow: #fbd456;
	$light-yellow: #f39722;

	.router-view {
		.uni-avatar {
			image {
				width: 100upx;
				height: 100upx;
			}
		}

		.user-name {
			width: 100%;

			.user-vip-tag {
				border: 2upx solid $color-warning;
				border-radius: 40upx;
				padding: 2upx 15upx;
			}
		}

		/deep/ .release-item {
			.uni-release-item {
				background-color: $color-active !important;
				margin-bottom: 0;
			}
		}

		.notice {
			background: linear-gradient(to right, $light-yellow, $color-warning);

			.more-btn {
				letter-spacing: 4upx;
				border: 4upx solid $yellow;
				background: linear-gradient(to bottom, $light-yellow, $color-danger 40%);
			}
		}

		.not-Login-mask {
			position: fixed;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			z-index: 99;
		}

		.uni-grids-item {
			padding: 20upx 10upx;
		}

		.user-info-box {
			display: flex;
			align-items: center;
		}

		.no-task {
			width: 100upx;
			height: 100upx;

			.img {}
		}

		.contact {
			position: absolute;
			left: 0;
			top: 0;
			background: none;
			z-index: 1;

			&::after {
				border: 0;
			}
		}
	}
</style>
